<template>
  <div class="a-greenhand">
    <img :src="bgImg" alt="">
    <div class="a-greenhand-header">
      <img :src="logImg" alt="分秒金融">
      <div @click="backToHome">返回首页</div>
    </div>
    <div class="a-greenhand-register-wrapper" :style="{top: registerTop + 'px'}">
      <register :callback="fireDownloadEvent"></register>
    </div>
    <div class="a-greenhand-good" :style="{top: goodTop + 'px'}">
      <good v-bind="goodData"></good>
    </div>
    <div class="a-greenhand-btn" :style="{top: btnTop + 'px'}">
      <vbutton text="马上注册领1288元红包" bgColor="#e61639" @click="scrollToTop"></vbutton>
    </div>
  </div>
</template>

<script>
  import register from 'components/register'
  import good from 'components/good'
  import vbutton from 'components/common/button'
  // 埋点做数据
  function fireEvent (eventType, eventName) {
    var PROPERTY_ID = '87fc7797cba24e669535152a92e239ba'
    var PING_SERVER_URL = 'http://advertiser.inmobiapis.com/tpce/v1/events/' + eventType + '?trackingPartner=InMobi'
    var pageData = {}
    if (typeof InmobiPixel !== 'undefined') {
      /* global InmobiPixel */
      window.inmobiPixel = new InmobiPixel()
      window.inmobiPixel.init({
        pingServer: PING_SERVER_URL,
        propertyId: PROPERTY_ID,
        domain: 'fenmiaojinrong.com'
      })
    }
    window.inmobiPixel.ping(eventName, pageData)
  }

  function fireCustomEvent (eventName) {
    fireEvent('custom', eventName)
  }

  export default {
    data () {
      return {
        bgWidth: 0,
        bgHeight: 0,
        bgImg: require('assets/bigbackground/promote.jpg'),
        logImg: require('assets/tuiguang_logo@3x.png'),
        goodData: {}
      }
    },
    computed: {
      registerTop () {
        return 530 * (this.bgHeight / 2800)
      },
      goodTop () {
        return 1300 * (this.bgHeight / 2800)
      },
      btnTop () {
        return 2560 * (this.bgHeight / 2800)
      }
    },
    methods: {
      scrollToTop () {
        window.scrollTo(0, 0)
      },
      backToHome () {
        window.location.href = 'nativejs://' + '{"viewNum":"6"}'
        this.$router.push('/home')
      },
      fireDownloadEvent () {
        fireEvent('download', 'download')
      }
    },
    created () {
      this.bgWidth = document.documentElement.clientWidth
      this.bgHeight = (2800 / 750) * this.bgWidth
      // 获取标的数据
      this.$http.get(`/api/borrow/borrowInfo/list?currentPage=1&numPerPage=10&borrowNewhand=1`)
        .then((res) => {
          if (res.data.success) {
            this.goodData = res.data.data.list[0]
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    mounted () {
      // 页面加载后动态穿件script做数据埋点
      const script = document.createElement('script')
      script.setAttribute('type', 'text/javascript')
      script.setAttribute('charset', 'UTF-8')
      script.setAttribute('src', 'https://i.l.inmobicdn.net/ifctpads/IFC/pixel/inmobipixel.js')
      script.setAttribute('id', 'js_hook')
      script.onload = function () {
        console.log('script加载完成')
        fireCustomEvent('fmjr_lp')
      }
      var heads = document.getElementsByTagName('head')
      if (heads.length) {
        heads[0].appendChild(script)
      } else {
        document.documentElement.appendChild(script)
      }
    },
    destroyed () {
      var heads = document.getElementsByTagName('head')[0]
      const script = document.getElementById('js_hook')
      heads.removeChild(script)
    },
    components: {
      register,
      good,
      vbutton
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/_variable.scss';

  .a-greenhand {
    position: relative;
    width: 100%;
    font-size: 30px;
    &>img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: $zIndex-1--activityBG;
    }
    &-header {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 130px;
      padding: 0 30px;
      position: absolute;
      z-index: $zIndex-2--activityOverBG;
      img {
        width: 222px;
        height: 60px;
      }
      div {
        box-sizing: border-box;
        width: 146px;
        height: 60px;
        color: $base-666;
        font-size: 30px;
        line-height: 64px;
        text-align: center;
        border-radius: 8px;
        border: 1px solid $base-666;
      }
    }
    &-register-wrapper {
      position: absolute;
      width: 690px;
      left: 30px;
      z-index: $zIndex-2--activityOverBG;
    }
    &-good {
      position: absolute;
      width: 690px;
      left: 30px;
      background: $base-fff;
      border-radius: 8px;
      z-index: $zIndex-2--activityOverBG;
    }
    &-btn {
      width: 100%;
      position: absolute;
      text-align: center;
      z-index: $zIndex-2--activityOverBG;
    }
  }
</style>
